<template>
	<view class="page">
		<view class="total">
			<view class="help">
			  <label for="userComment">帮助内容:</label>
			  <textarea v-model="helpContent" cols="30" rows="10" placeholder="在此输入帮助信息..." maxlength="200" wrap="soft"></textarea>
			</view>
			<view class="mid">
				<view class="wenzi">
					<label for="name">取货地点：</label>
					<input type="text" v-model="pickUpAddress" placeholder="请输入取货地点" maxlength="13"/>
					<view class="iconfont icon-quhuodidian"></view>
				</view>
				<view class="wenzi">
					<label for="name">收件地址：</label>
					<input style="margin-left: 5px;" type="text" v-model="address" placeholder="请输入收件地址" maxlength="13"/>
				</view>
				<view class="wenzi">
					<label for="name">金额：</label>
					<input style="margin-left: 35px;" type="text" v-model.number="addMoney" placeholder="请输入金额" maxlength="3"/>
				</view>
				<view class="tips">
					<text>跑腿费</text>
					<text>{{10+addMoney}}元</text>
				</view>
				<view class="register-btn" @click="submit">
					立即发布
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import {orderAdd} from "../../api/index.js"
	export default {
		data() {
			return {
				helpContent:"",
				pickUpAddress:"",
				addMoney:0,
				address:""

			}
		},
		methods:{
			submit(){
				//判断输入是否为空
				if(!this.helpContent.trim()||!this.pickUpAddress.trim()||!this.address.trim()){
					uni.showToast({
						title:"输入不全",
						icon:"none"
					})
					return;
				}
				//构造表单的数据
				let info={
					helpContent:this.helpContent,
					pickUpAddress:this.pickUpAddress,
					phone:uni.getStorageSync("userInfo").phoneNum,
					user_pic:uni.getStorageSync("userInfo").user_pic
				}
				//构造数据提交到后台
				let  obj={
					type:'校园跑腿',
					money:10+this.addMoney,
					state:0,
					address:this.address,
					orderInfo:JSON.stringify(info),
					user_id:uni.getStorageSync("userInfo").id
				}
				//调用接口提交数据
				orderAdd(obj).then(res=>{
					if(res.data.status===0){
						uni.showToast({
							title:"提交成功"
						})
						setTimeout(()=>{
							uni.navigateBack()
						},200)
					}else{
						uni.showToast({
							title:"提交失败",
							type:"none"
						})
					}
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.page{
		width:100%;
		height:100vh;
	}
	.total{
		border-radius: 10px;
		margin:20px auto 0;
		width:88%;
		height:88%;
		// background-color: red;
		box-shadow: 0 0 5px 5px #FFC0CB ;
		padding:3px;
	}
	label{
		// font-size: 14px;
		margin-left: 8px;
		
	}
	textarea {
	    width: 90%; /* 宽度 */
	    height: 150px; /* 高度 */
	    resize: none; /* 禁止用户调整大小 */
		border: 2px solid #A9A9A9 ;
		margin: 5px auto;
		padding: 5px;
		border-radius: 8px;
	}
	.wenzi{
		// padding:5px;
		// background-color: red;
		padding: 3px;
		width:98%;
		display: flex;
		border-bottom: 2px solid #C0C0C0 ; 
		padding-bottom: 5px;
	}
	.wenzi input{
		margin-left: -5%;
		text-align: right;
	}
	.icon-quhuodidian{
	margin-top: 3px;	
	margin-left: 3px;
	}
	.tips{
		margin-top: 10px;
		margin-left: 35%;;
	}
	.register-btn{
		width:90%;
		height:40px;
		margin:20% auto 0;
		line-height: 80rpx;
		text-align: center;
		background-color: #FF88C2;
		border-radius: 30rpx;
		padding-top:5px;
	}
</style>
